<template>
	<div>
		<el-dialog title="添加账号" width="400px" v-model="showModel" @close="changeClose">
			<el-form :model="form" :rules="formRules" ref="formRef" label-width="80">
				<el-form-item prop="nickname" label="昵称">
					<el-input v-model="form.nickname" style="width: 90%;"></el-input>
				</el-form-item>
				<el-form-item prop="avatar" label="头像">
					<uw-image :src="form.avatar" :showMack="true" :imageList="[form.avatar]" v-if="form.avatar"
						@deleteChange="form.avatar=''" />
					<div class="uw-update-btn uw-border-white-smoke-all uw-flex-center" @click.stop="showManagerFun"
						v-else>
						<el-icon :size="30" color="#F5F5F5">
							<Plus />
						</el-icon>
					</div>
				</el-form-item>
				<el-form-item prop="username" label="登录账号">
					<el-input v-model="form.username" style="width: 90%;"></el-input>
				</el-form-item>
				<el-form-item prop="password" label="登录密码">
					<el-input v-model="form.password" style="width: 90%;"></el-input>
				</el-form-item>
				<el-form-item prop="password" label="权限配置">
					<el-tree
						style="width: 100%;"
					    show-checkbox
					    node-key="id"
					    default-expand-all
					  />
				</el-form-item>
				<el-form-item label="是否禁用">
					<el-switch v-model="form.isDisabled"></el-switch>
				</el-form-item>
			</el-form>

			<template #footer>
				<div class="dialog-footer">
					<el-button @click="changeClose">取消</el-button>
					<el-button type="primary" @click="submit">确定</el-button>
				</div>
			</template>
		</el-dialog>
		<uw-image-manager :isMultiple="false" v-if="showManager" @change="changeImage" />
	</div>
</template>

<script setup lang="ts">
	/**
	 * 添加账号
	 * @event {Function()} change 添加成功或者编辑成功的回调方法 用于刷新列表数据 
	 */
	import { addRoleApi , editRoleApi } from '@/api/api';
	import { ElMessage } from 'element-plus';
	import { ref, watch } from 'vue';
	const props = defineProps<{
		modelValue : boolean
	}>()

	const emits = defineEmits<{
		(e : 'update:modelValue', val : boolean) : void
		(e : 'change') : void
	}>()

	// 定义一个响应式的 `showModel`，初始值是 `modelValue`
	const showModel = ref(props.modelValue)

	// 监听 `modelValue` 变化，更新 `showModel`
	watch(() => props.modelValue, (newValue) => {
		if (newValue !== showModel.value) {
			showModel.value = newValue
		}
	})

	// 监听 `showModel` 变化，触发 `emit` 更新父组件
	watch(() => showModel.value, (newValue) => {
		if (newValue !== props.modelValue) {
			emits('update:modelValue', newValue)
		}
	})
	const isEdit = ref(false)
	const rowId = ref(null)
	const formRef = ref()
	const showManager = ref<boolean>(false)
	const form = ref({
		nickname: '',
		username: '',
		password: '',
		avatar: '',
		isDisabled: false
	})
	const formRules = ref({
		nickname: [
			{ required: true, message: '请输入昵称', trigger: 'blur' },
		],
		username: [
			{ required: true, message: '请输入账号', trigger: 'blur' },
		],
		password: [
			{ required: true, message: '请输入密码', trigger: 'blur' },
		],
		avatar: [
			{ required: true, message: '请上传头像', trigger: 'blur' },
		],
		isDisabled: [
			{ required: true, message: '请选择状态', trigger: 'blur' },
		]
	})
	const showManagerFun = () => {
		showManager.value = true
	}
	const changeImage = (val : any[]) => {
		form.value.avatar = val[0].url
		showManager.value = false
	}
	/**
	 * 编辑数据回填方法
	 */
	const edit = (row:any) => {
		isEdit.value = true
		rowId.value = row.id
		Object.keys(form.value).forEach((val)=>{
			form.value[val] = row[val]
		})
	}
	/**
	 * 提交数据
	 */
	const submit = () => {
		formRef.value.validate(async(valid: any) => {
			if(!valid) return 
			const { message } = isEdit.value ? await editAdminApi({id:rowId.value,...form.value}) : await addAdminApi(form.value); 
			ElMessage.success(message)
			changeClose()
			emits('change')
		});
	}
	/**
	 * changeClose
	 */
	const changeClose = () => {
		isEdit.value = false
		rowId.value = null
		formRef.value.resetFields()
		showModel.value = false
	}
	// 抛出 edit方法
	defineExpose({
		edit
	})
</script>

<style>
	.uw-update-btn {
		width: 100px;
		height: 100px;
		cursor: pointer;
	}
</style>